<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,
    user-scalable=no, maximum-scale=1.0, minimum-scale=1.0 ">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <title>艾编程</title>
</head>
<body>
    <!-- 头部 -->
    <header>
        <div class="header">
            <section class="logo"></section>
            <section class="search"></section>
            <section class="login">登录</section>
            <section class="download">下载App</section>
        </div>
    </header>
    <!-- 导航 -->
    <nav>
        <div class="nav_content">
            <section class="nav_item"><a>首页</a></section>
            <section class="nav_item"><a>动画</a></section>
            <section class="nav_item"><a>番剧</a></section>
            <section class="nav_item"><a>国创</a></section>
            <section class="nav_item"><a>音乐</a></section>
            <section class="nav_item"><a>舞蹈</a></section>
            <section class="nav_item"><a>电影</a></section>
        </div>
    </nav>
    <!-- banner轮播 -->
    <div class="banner">
        <div class="swiper mySwiper mySwiper_1">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="images/banner-1.png" alt=""></div>
                <div class="swiper-slide"><img src="images/banner-2.png" alt=""></div>
                <div class="swiper-slide"><img src="images/banner-3.png" alt=""></div>
                <div class="swiper-slide"><img src="images/banner-4.png" alt=""></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <!-- 十个导航模块 -->
    <div class="tenlist">
        <section class="tenlist_content">
            <a href="###">
                <img src="icons/list-1.png" alt="">
                <span>番剧</span>
            </a>
        </section>
        <section class="tenlist_content">
            <a href="###">
                <img src="icons/list-2.png" alt="">
                <span>游戏</span>
            </a>
        </section>
        <section class="tenlist_content">
            <a href="###">
                <img src="icons/list-3.png" alt="">
                <span>新剧</span>
            </a>
        </section>
        <section class="tenlist_content">
            <a href="###">
                <img src="icons/list-4.png" alt="">
                <span>美术</span>
            </a>
        </section>
        <section class="tenlist_content">
            <a href="###">
                <img src="icons/list-5.png" alt="">
                <span>健康</span>
            </a>
        </section>
        <section class="tenlist_content">
            <a href="###">
                <img src="icons/list-6.png" alt="">
                <span>喜剧</span>
            </a>
        </section>
        <section class="tenlist_content">
            <a href="###">
                <img src="icons/list-7.png" alt="">
                <span>美食</span>
            </a>
        </section>
        <section class="tenlist_content">
            <a href="###">
                <img src="icons/list-8.png" alt="">
                <span>科技</span>
            </a>
        </section>
        <section class="tenlist_content">
            <a href="###">
                <img src="icons/list-9.png" alt="">
                <span>生活</span>
            </a>
        </section>
        <section class="tenlist_content">
            <a href="###">
                <img src="icons/list-10.png" alt="">
                <span>体育</span>
            </a>
        </section>
    </div>
    <!-- 热门排行 -->
    <div class="hot">
        <section class="hot_content">
            <section class="hot_item">热门排行</section>
            <section class="hot_item">最新热播</section>
            <section class="hot_item">综合推荐</section>
        </section>
        <section class="hot_publish">
            <section class="hot_publish_item">
                <a href="###">
                    <img src="images/hot_1.png" alt="" class="hot_img">
                    <img src="images/hot_bg.png" alt="" class="hot_bg">
                    <section class="hot_watch">
                        <section class="hot_watch_item">
                            <img src="icons/play.png" alt="">
                            <span>70.8万</span>
                        </section>
                        <section class="hot_watch_item">
                            <img src="icons/chat.png" alt="">
                            <span>11.5万</span>
                        </section>
                    </section>
                </a>
                <p class="hot_txt">透明手表。下集预告</p>
            </section>
            <section class="hot_publish_item">
                <a href="###">
                    <img src="images/hot_2.png" alt="" class="hot_img">
                    <img src="images/hot_bg.png" alt="" class="hot_bg">
                    <section class="hot_watch">
                        <section class="hot_watch_item">
                            <img src="icons/play.png" alt="">
                            <span>190.4万</span>
                        </section>
                        <section class="hot_watch_item">
                            <img src="icons/chat.png" alt="">
                            <span>6160</span>
                        </section>
                    </section>
                </a>
                <p class="hot_txt">【人类高质量CG】咏春宁次： 笼中鸟心中拳</p>
            </section>
        </section>
    </div>
    <div class="opuscule">
            <section class="opuscule_content">
                <section class="opuscule_item">
                    <img src="images/opuscule_1.png" alt="" class="opuscule_left">
                    <p class="opuscule_txt title1">自制战斗机式的打水仗摩托车</p>
                    <p class="opuscule_txt title2">所有原神玩家都可以参加！会额外有一个满……</p>
                    <img src="icons/play_2.png" alt="" class="opuscule_right">
                </section>
            </section>
            <section class="opuscule_content">
                <section class="opuscule_item">
                    <img src="images/opuscule_2.png" alt="" class="opuscule_left">
                    <p class="opuscule_txt title1">原 神 之 友 （第九期）</p>
                    <p class="opuscule_txt title2">跟小朋友打水仗输了做了个战斗机准备一雪……</p>
                    <img src="icons/play_2.png" alt="" class="opuscule_right">
                </section>
            </section>
    </div>
    <!-- 最近在看 -->
    <div class="lately">
        <section class="lately_title">
            <section class="lately_item1">最近在看</section>
            <section class="lately_item2">查看全部 ></section>
        </section>
        <div class="lately_banner">
            <div class="swiper mySwiper mySwiper_2 ">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="images/lately_1.png" alt="">
                        <span>番外 动态漫</span>
                    </div>
                    <div class="swiper-slide">
                        <img src="images/lately_2.png" alt="">
                        <span>这才是顶级的 气场</span>
                    </div>
                    <div class="swiper-slide">
                        <img src="images/lately_3.png" alt="">
                        <span>再飞行，带着 梦想再次的飞起</span>
                    </div>
                    <div class="swiper-slide">
                        <img src="images/lately_1.png" alt="">
                        <span>番外 动态漫</span>
                    </div>
                    <div class="swiper-slide">
                        <img src="images/lately_2.png" alt="">
                        <span>这才是顶级的 气场</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- 时代夏令营 -->
    <div class="hot summercamp_content">
        <section class="hot_publish summercamp">
            <section class="hot_publish_item">
                <a href="###">
                    <img src="images/summer_1.png" alt="" class="hot_img">
                    <img src="images/hot_bg.png" alt="" class="hot_bg">
                    <section class="hot_watch">
                        <section class="hot_watch_item">
                            <img src="icons/play.png" alt="">
                            <span>70.8万</span>
                        </section>
                        <section class="hot_watch_item">
                            <img src="icons/chat.png" alt="">
                            <span>11.5万</span>
                        </section>
                    </section>
                </a>
                <p class="hot_txt">【时代少年团】《时代夏令营》 03：水上的卧龙凤雏们</p>
            </section>
            <section class="hot_publish_item">
                <a href="###">
                    <img src="images/summer_2.png" alt="" class="hot_img">
                    <img src="images/hot_bg.png" alt="" class="hot_bg">
                    <section class="hot_watch">
                        <section class="hot_watch_item">
                            <img src="icons/play.png" alt="">
                            <span>190.4万</span>
                        </section>
                        <section class="hot_watch_item">
                            <img src="icons/chat.png" alt="">
                            <span>6160</span>
                        </section>
                    </section>
                </a>
                <p class="hot_txt">这真的是碳基生物能吃的玩意 吗？？？</p>
            </section>
        </section>
        <section class="hot_publish summercamp">
            <section class="hot_publish_item">
                <a href="###">
                    <img src="images/summer_3.png" alt="" class="hot_img">
                    <img src="images/hot_bg.png" alt="" class="hot_bg">
                    <section class="hot_watch">
                        <section class="hot_watch_item">
                            <img src="icons/play.png" alt="">
                            <span>70.8万</span>
                        </section>
                        <section class="hot_watch_item">
                            <img src="icons/chat.png" alt="">
                            <span>11.5万</span>
                        </section>
                    </section>
                </a>
                <p class="hot_txt">约 尔 蹦 迪 2.0，跳 极 乐 净 土！【咬人猫】</p>
            </section>
            <section class="hot_publish_item">
                <a href="###">
                    <img src="images/summer_4.png" alt="" class="hot_img">
                    <img src="images/hot_bg.png" alt="" class="hot_bg">
                    <section class="hot_watch">
                        <section class="hot_watch_item">
                            <img src="icons/play.png" alt="">
                            <span>190.4万</span>
                        </section>
                        <section class="hot_watch_item">
                            <img src="icons/chat.png" alt="">
                            <span>6160</span>
                        </section>
                    </section>
                </a>
                <p class="hot_txt">爽！边迷路边吃超辣美食的感 觉，只能在9D重庆体验到！</p>
            </section>
        </section>
        <section class="hot_publish summercamp">
            <section class="hot_publish_item">
                <a href="###">
                    <img src="images/hot_1.png" alt="" class="hot_img">
                    <img src="images/hot_bg.png" alt="" class="hot_bg">
                    <section class="hot_watch">
                        <section class="hot_watch_item">
                            <img src="icons/play.png" alt="">
                            <span>70.8万</span>
                        </section>
                        <section class="hot_watch_item">
                            <img src="icons/chat.png" alt="">
                            <span>11.5万</span>
                        </section>
                    </section>
                </a>
                <p class="hot_txt">透明手表。下集预告</p>
            </section>
            <section class="hot_publish_item">
                <a href="###">
                    <img src="images/hot_2.png" alt="" class="hot_img">
                    <img src="images/hot_bg.png" alt="" class="hot_bg">
                    <section class="hot_watch">
                        <section class="hot_watch_item">
                            <img src="icons/play.png" alt="">
                            <span>190.4万</span>
                        </section>
                        <section class="hot_watch_item">
                            <img src="icons/chat.png" alt="">
                            <span>6160</span>
                        </section>
                    </section>
                </a>
                <p class="hot_txt">【人类高质量CG】咏春宁次： 笼中鸟心中拳</p>
            </section>
        </section>
    </div>
    <!-- 底部导航 -->
    <footer>
        <a href="###">
            <img src="icons/footer_1.png" alt="">
            <span>首页</span>
        </a>
        <a href="###">
            <img src="icons/footer_2.png" alt="">
            <span>首页</span>
        </a>
        <a href="###">
            <img src="icons/footer_release.png" alt="">
        </a>
        <a href="###">
            <img src="icons/footer_3.png" alt="">
            <span>首页</span>
        </a>
        <a href="###">
            <img src="icons/footer_4.png" alt="">
            <span>首页</span>
        </a>
    </footer>
    <script src="js/swiper.min.js "></script>
    <script>
        // (function(){
        //     为了防止轮播图冲突
        // })()
        //第一个轮播图
      (function(){
        var swiper = new Swiper(".mySwiper_1", {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
    })();
    // 第二个轮播图
    (function(){
        var swiper = new Swiper(".mySwiper_2", {
        slidesPerView: 3.2,
        spaceBetween: 10,
      });
    })();


    

      
    </script>
</body>
</html>